<template>

  <div>
    <div :id="idWatcher" class="svg" :style="`width:${realWidth};height:${realHeight};`"></div>
  </div>


</template>

<script>
import SVGA from 'svgaplayerweb';

export default {
  name: "SvgaPreview",
  props: {
    id: {
      type: [String],
      default: ""
    },
    src: {
      type: [String],
      default: ""
    },
    width: {
      type: [Number, String],
      default: ""
    },
    height: {
      type: [Number, String],
      default: ""
    }
  },
  // mounted中  引入方法
  mounted() {
    // 如果首次进入会报错 或者不展示svga的话可以使用$nextTick  （我是加了的 不然首次不展示）
    this.$nextTick(() => {
      this.initMachineSVGA();
    })
  },
  methods: {
    initMachineSVGA() {
      let player = new SVGA.Player('#svga' + this.id);
      let parser = new SVGA.Parser('#svga' + this.id);
      // '@/static/svga/xiaoren.svga' svga文件地址
      parser.load(this.$resPicBaseUrl + this.src, function (videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
      }, function (error) {
      })
    },

  },
  computed: {
    idWatcher: function () {
      // 在计算属性中可以监听到 props.count 的变化
      return 'svga' + this.id;
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    }
  },
  watch: {
    idWatcher: function (newValue, oldValue) {
      // 监听 countWatcher 的变化
      this.$nextTick(() => {
        this.initMachineSVGA();
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.svg {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;

  &:hover {
    transform: scale(1.2);
  }
}
</style>
